<template>
  <div class="calendar">
    <div class="calendar_header">
      <el-input v-model="searchVal" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="dialogAdd">+ 新建日程</el-button>
    </div>
    <div class="calendar_body">
<!--      <div class="calendar_body_left">-->
<!--        <div class="calendar_body_left_top">-->
<!--          <div class="calendar_body_left_top_title">日程状态图例</div>-->
<!--          <div>-->
<!--            <el-button class="unstart_btn">未开始</el-button>-->
<!--            <el-button class="doing_btn">进行中</el-button>-->
<!--            <el-button class="success_btn">已完成</el-button>-->
<!--            <el-button class="delay_btn">已延时</el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="calendar_body_right" style="padding: 100px">
        <template>
          <FullCalendar ref="fullCalendar" :options="calendarOptions" />
        </template>
      </div>
    </div>
    <!-- 新建日程弹窗 -->
    <el-dialog title="新建日程" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="日程名称" :label-width="formLabelWidth"  prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日程状态" :label-width="formLabelWidth" prop="status">
          <el-select v-model="form.status" placeholder="请选择日程状态">
            <el-option label="未开始" value="unstart"></el-option>
            <el-option label="进行中" value="doing"></el-option>
            <el-option label="已完成" value="success"></el-option>
            <el-option label="已延时" value="delay"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日程时间" :label-width="formLabelWidth"  prop="date">
          <template>
            <el-date-picker
              v-model="form.date"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import "@/assets/styles/calendar.scss"

import '@fullcalendar/core'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import moment from "moment";

export default {
  name: 'Home',
  components: {
    FullCalendar
  },
  data() {
    return {
      n:4,
      searchVal:'',
      dialogFormVisible:false,
      formLabelWidth: '120px',
      form:{
        name: '',
        date: '',
        status:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入日程名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择日程状态', trigger: 'change' }
        ]
      },
      testData:[{
        id: 1,
        title: '任务1未开始',
        start: '2024-04-06 10:30:00',
        end: '2024-04-07 10:30:00',
        color: '#ffcc99',
        status:'unstart',
        editable: true, //允许拖动缩放，不写默认就是false
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      },{
        id: 2,
        title: '任务2进行中',
        start: '2024-04-06 10:30:00',
        end: '2024-04-08 10:30:00',
        color: '#5580ee',
        status:'doing',
        editable: true, //允许拖动缩放
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      },{
        id: 3,
        title: '任务3已完成',
        start: '2024-04-09 10:30:00',
        end: '2024-04-09 18:30:00',
        // color: '#87d068',
        status:'success',
        editable: true, //允许拖动缩放
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      },{
        id: 4,
        title: '任务4已延时',
        start: '2024-04-18 10:30:00',
        end: '2024-04-18 10:30:00',
        color: '#ff99b3',
        status:'delay',
        editable: true, //允许拖动缩放
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      }],
      // 可拖动列表数据
      list: [
        // { name: '删除假日', value: '0', color: 'blue'  }
        { name: '工作日1', value: '1', status: 'work' },
        { name: '工作日2', value: '5', status: 'work' },
        { name: '春节放假', value: '7', status: 'holiday' },
        { name: '中秋节放假', value: '3', status: 'holiday'  },
        { name: '国庆节放假', value: '7', status: 'holiday'  },
      ],
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh-cn', //? 配置中文
        firstDay: 1,// 把每周设置为从周一开始
        initialDate: moment().format("YYYY-MM-DD HH:mm:ss"), // 自定义设置背景颜色时一定要初始化日期时间
        aspectRatio: 2.6, // 设置日历单元格宽度与高度的比例。
        buttonText: {/* 设置按钮文字 */
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
          list: '周列表',
        },
        headerToolbar: {//日历头部
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek',
        },
        selectable: true,//可编辑
        // dayMaxEvents: true,
        // slotMinutes: 15,
        editable: false, // 日历上是否可拖拽
        droppable: true,
        dropAccept: '.list-group-item',
        drop: this.drop,
        height: 650,
        validRange: this.validRange,  //设置可显示的总日期范围
        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
        eventClick: this.handleEventClick, //点击日程触发
        dateClick: this.handleDateClick, //点击日期触发
        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
        eventResize: this.calendarEventDropOrResize, //缩放事件触发
        displayEventTime: false, //不显示具体时间
      },
      validRange: {
        start: '2023-01-01 ',
        end: moment().add(6, 'months').format('YYYY-MM-DD HH:mm:ss'),
      },
      new_startDate:'',
      new_endDate:'',
    }
  },
  mounted() {
    // 初始化日历 调用获取视图活动数据方法
    this.datesSet();

    // // 拖拽
    // var containerEl = document.getElementById('list-group-item');
    // // 初始化外部事件
    // new Draggable(containerEl, {
    //     itemSelector: '.list-group-item',
    //   }
    // )
  },
  created() {
    this.datesSet();
  },
  methods: {
    datesSet(info) {   //注意：该方法在页面初始化时就会触发一次
      console.log(info)
      // this.search()  //请求本页数据
      //虚拟数据
      this.testData.forEach((item,index) => {
        // console.log('item',item)
        if(item.status == 'unstart'){
          this.$set(item,"color", "#ffcc99")
        }else if(item.status == 'doing'){
          this.$set(item,"color", "#5580ee")
        }else if(item.status == 'success'){
          this.$set(item,"color", "#87d068")
        }else if(item.status == 'delay'){
          this.$set(item,"color", "#FF0033")
        }else if(item.status == 'work'){
          this.$set(item,"color", "#66CCCC")
        }else{
          this.$set(item,"color", "#FF6600")
        }
      });
      this.calendarOptions.events = this.testData
      this.list.forEach((item,index) => {
        if(item.status == 'work'){
          this.$set(item,"color","#66CCCC")
        }else{
          this.$set(item,"color","#FF6600")
        }
      })
    },
    dialogAdd(){
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          this.n ++
          // console.log('date',this.form.date)
          let obj = {
            id: Number(this.n),
            title: String(this.form.name),
            start: String(this.form.date[0]),
            end: String(this.form.date[1]),
            // color: '#ff99b3',
            status:String(this.form.status),
            editable: true, //允许拖动缩放
            overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
          }
          console.log(obj)
          this.testData.push(obj)
          this.datesSet();
          // console.log('this.calendarOptions.events',this.calendarOptions.events)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 转换时间格式
    parseTime(date) {
      const yy = date.getFullYear()
      const MM = (date.getMonth() + 1) < 10 ? '0' + (
        date.getMonth() + 1) : (date.getMonth() + 1)
      const dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const HH = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      const	newDate = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
      return newDate;
    },
    handleEventClick(info) {},
    handleDateClick(info){},
    // 拖拽事件
    calendarEventDropOrResize(info){
      // console.log(info) //获取拖拽目标信息
      // 获取拖拽后的时间
      this.new_startDate = this.parseTime(info.event._instance.range.start)
      this.new_endDate = this.parseTime(info.event._instance.range.end)
    },
    drop(date, allDay) {
      // let typeNumber = null
      // const firstChildName = null
      const isWork = date.draggedEl.lastChild.className.indexOf('work') > 0
      console.log('date',date)
      date.draggedEl.remove()
      this.n ++
      const obj = {
        // dayNum: date.draggedEl.lastChild.innerHTML,
        id: Number(this.n),
        title: String(date.draggedEl.firstChild.innerHTML),
        start: Date.parse(moment(date.dateStr).format()), // 开始时间
        end: Date.parse(moment(date.dateStr).add(date.draggedEl.lastChild.innerHTML, 'days').format()), // 结束时间
        // color: '#ff99b3',
        status:isWork ? 'work' : 'holiday',
        editable: true, //允许拖动缩放
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      }
      this.testData.push(obj)
      this.datesSet();
      // console.log(this.calendarOptions.events)
      // console.log('date.draggedEl.lastChild.innerHTML',date.draggedEl.lastChild.className.indexOf('holiday'))
    }
  }

};
</script>
